<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>中国贸易报社综合业务管理系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .left-bg {
      background-image: url('https://img.shetu66.com/2023/04/10/1681118613079826.jpg');
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 100%;
      position: relative;
    }
    .left-bg::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.1);
    }
    .info-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      color: white;
      text-align: left;
      z-index: 1;
    }
    .logo {
      background-image: url("{{ url_for('static', filename='images/CCPIT.png') }}");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      width: 100px;
      height: 100px;
      margin: 0 auto;
    }
    .feature-item {
      display: flex;
      align-items: center;
      margin-bottom: 1.5rem;
    }
    .feature-icon {
      width: 2.5rem;
      height: 2.5rem;
      margin-right: 1rem;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>

<body class="h-screen w-screen flex">
  <div class="flex w-full h-full">
    <!-- 左侧背景 -->
    <div class="hidden md:block md:w-1/2 h-full left-bg">
      <div class="info-overlay">
        <h1 class="text-4xl font-bold mb-6">中国贸易报社综合业务管理系统</h1>
        <p class="text-lg mb-8 opacity-90">打造智能化、数字化的新闻媒体管理平台</p>
        
        <div class="space-y-6">
          <div class="feature-item">
            <div class="feature-icon">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838l-2.727 1.17 3.137 1.344a1 1 0 00.788 0l7-3a1 1 0 000-1.84l-7-3z"></path>
              </svg>
            </div>
            <div>
              <h3 class="font-semibold text-xl">新闻采编管理</h3>
              <p class="opacity-80">提供全流程新闻采编、审核、发布管理</p>
            </div>
          </div>
          
          <div class="feature-item">
            <div class="feature-icon">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
                <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path>
              </svg>
            </div>
            <div>
              <h3 class="font-semibold text-xl">数据资源整合</h3>
              <p class="opacity-80">整合贸易数据、政策法规、行业资讯</p>
            </div>
          </div>
          
          <div class="feature-item">
            <div class="feature-icon">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 0l-2 2a1 1 0 101.414 1.414L8 10.414l1.293 1.293a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
              </svg>
            </div>
            <div>
              <h3 class="font-semibold text-xl">智能分析决策</h3>
              <p class="opacity-80">提供数据分析、趋势预测、决策支持</p>
            </div>
          </div>
        </div>

        <div class="mt-12 text-sm opacity-75">
          <p>中国贸易报社 - 引领中国对外经贸新闻报道</p>
          <p>打造国际一流的经贸新闻传媒集团</p>
        </div>
      </div>
    </div>

    <!-- 右侧登录框 -->
    <div class="w-full md:w-1/2 h-full flex flex-col justify-center items-center bg-white p-8">
      <!-- 登录框内容 -->
      <div class="max-w-sm w-full">
        <!-- Logo -->
        <div
       style="position: relative; top: 40px;left: -150px;width: 30%;"
        class="logo mb-4"></div>
        
        <p
       style="position: relative; top: -50px;
       left: 110px;
       font-weight: 100;font-size: 20px;"
        >
        <span style="font-size: 20px;">
          中国贸易报 | 中国对外贸易杂志
        </span>
        <br>
        <span style="font-size: 18px;">
          中国贸易报社有限公司
        </span>
      </p>

        <form id="loginForm" class="space-y-4">
          <!-- 登录模式切换 -->
          <div class="flex mb-2">
            <a href="#" id="passwordLoginBtn" 
              class="mr-6 text-base font-medium px-2 py-1 border-b-2 border-blue-500 text-blue-600">
              密码登录
            </a>
            <a href="#" id="codeLoginBtn" 
              class="text-base font-medium px-2 py-1 border-b-2 border-transparent text-gray-500 hover:text-gray-700">
              验证码登录
            </a>
          </div>

          <!-- 手机号输入 -->
          <div>
            <input
            style="border-radius: 5px;background-color: #f5f5f5;border: none;"
              type="text" id="phone" placeholder="请输入手机号/用户名" 
              class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base">
          </div>
          
          <!-- 密码输入区域 - 默认显示 -->
          <div id="passwordSection">
            <input 
               style="border-radius: 5px;background-color: #f5f5f5;border: none;"
            type="password" id="password" placeholder="请输入密码"
              class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base">
          </div>

          <!-- 验证码输入区域 - 默认隐藏 -->
          <div id="codeSection" class="hidden">
            <div class="flex space-x-2">
              <input type="text" id="verificationCode" placeholder="请输入6位验证码" maxlength="6"
                class="mt-1 block w-3/5 px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base">
              <button type="button" id="getCodeBtn" 
                class="mt-1 w-2/5 px-4 py-3 border border-gray-300 rounded-lg text-blue-600 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-base font-medium">
                获取验证码
              </button>
            </div>
            <div class="mt-1 text-xs text-gray-500 text-right">
              <a href="#" id="codeHelpLink" class="hover:text-blue-500">收不到验证码？</a>
            </div>
          </div>

          <!-- 登录按钮 -->
          <button type="submit" 
            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mt-6">
            登录
          </button>
        </form>

        <div id="error-message" class="mt-2 text-sm text-red-600 hidden"></div>
      </div>

      <!-- 底部信息 -->
      <div class="absolute bottom-4 text-center text-gray-600 text-sm">
        <p>© 2025 中国国际贸易报社有限公司 版权所有</p>
        <p>技术咨询：武洋锐 +86 13522418029</p>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const loginForm = document.getElementById("loginForm");
      const phoneInput = document.getElementById("phone");
      const passwordInput = document.getElementById("password");
      const verificationCodeInput = document.getElementById("verificationCode");
      const errorMessage = document.getElementById("error-message");
      const codeLoginBtn = document.getElementById("codeLoginBtn");
      const passwordLoginBtn = document.getElementById("passwordLoginBtn");
      const passwordSection = document.getElementById("passwordSection");
      const codeSection = document.getElementById("codeSection");
      const getCodeBtn = document.getElementById("getCodeBtn");
      const codeHelpLink = document.getElementById("codeHelpLink");

      let isPasswordMode = true; // 默认为密码登录模式
      let countdown = 60;
      let timer = null;

      // 切换到验证码登录模式
      codeLoginBtn.addEventListener("click", function(e) {
        e.preventDefault();
        if (isPasswordMode) {
          isPasswordMode = false;
          codeLoginBtn.classList.add("border-blue-500", "text-blue-600");
          codeLoginBtn.classList.remove("border-transparent", "text-gray-500");
          passwordLoginBtn.classList.remove("border-blue-500", "text-blue-600");
          passwordLoginBtn.classList.add("border-transparent", "text-gray-500");
          passwordSection.classList.add("hidden");
          codeSection.classList.remove("hidden");
          phoneInput.placeholder = "请输入手机号";
        }
      });

      // 切换到密码登录模式
      passwordLoginBtn.addEventListener("click", function(e) {
        e.preventDefault();
        if (!isPasswordMode) {
          isPasswordMode = true;
          passwordLoginBtn.classList.add("border-blue-500", "text-blue-600");
          passwordLoginBtn.classList.remove("border-transparent", "text-gray-500");
          codeLoginBtn.classList.remove("border-blue-500", "text-blue-600");
          codeLoginBtn.classList.add("border-transparent", "text-gray-500");
          codeSection.classList.add("hidden");
          passwordSection.classList.remove("hidden");
          phoneInput.placeholder = "请输入手机号/用户名";
        }
      });

      // 获取验证码
      getCodeBtn.addEventListener("click", function() {
        const phone = phoneInput.value.trim();
        if (!/^1[3-9]\d{9}$/.test(phone)) {
          showError("请输入正确的手机号");
          return;
        }
        
        // 禁用按钮并开始倒计时
        startCountdown();
      });

      // 收不到验证码链接
      codeHelpLink.addEventListener("click", function(e) {
        e.preventDefault();
        showError("请检查手机是否开启短信拦截，或联系客服");
      });

      // 验证码倒计时功能
      function startCountdown() {
        if (timer) {
          clearInterval(timer);
        }
        
        getCodeBtn.disabled = true;
        getCodeBtn.textContent = `${countdown}秒后重新获取`;
        
        timer = setInterval(() => {
          countdown--;
          getCodeBtn.textContent = `${countdown}秒后重新获取`;
          
          if (countdown <= 0) {
            clearInterval(timer);
            getCodeBtn.disabled = false;
            getCodeBtn.textContent = "获取验证码";
            countdown = 60;
          }
        }, 1000);
      }

      function showError(message) {
        errorMessage.textContent = message;
        errorMessage.classList.remove("hidden");
      }

      function hideError() {
        errorMessage.classList.add("hidden");
      }

      loginForm.addEventListener("submit", async function (event) {
        event.preventDefault();
        hideError();

        const phone = phoneInput.value.trim();
        const password = isPasswordMode ? passwordInput.value.trim() : verificationCodeInput.value.trim();

        // 验证手机号/用户名
        if (isPasswordMode) {
          if (!phone) {
            showError("请输入用户名或手机号");
            return;
          }
          if (!password) {
            showError("请输入密码");
            return;
          }
        } else {
          if (!/^1[3-9]\d{9}$/.test(phone)) {
            showError("请输入正确的手机号");
            return;
          }
          if (!password || password.length !== 6 || !/^\d{6}$/.test(password)) {
            showError("请输入6位数字验证码");
            return;
          }
        }

        const submitButton = event.submitter;
        submitButton.disabled = true;
        submitButton.textContent = "登录中...";

        try {
          const api_url = "{{ url_for('login') }}"
            + "{{ '?client_id=' + request.args.get('client_id') if request.args.get('client_id') else '' }}"
            + "{{ '&redirect_uri=' + request.args.get('redirect_uri') if request.args.get('redirect_uri') else '' }}"
            + "{{ '&state=' + request.args.get('state') if request.args.get('state') else '' }}";

          console.log(api_url);
          const response = await fetch(api_url, {
            method: "POST",
            headers: {
              "Content-Type": "application/json"
            },
            body: JSON.stringify({
              username: phone,
              password: password,
              loginType: isPasswordMode ? 'password' : 'code'
            })
          });

          const result = await response.json();

          if (result.status === 200) {
            window.location.href = "/oauth/index";
          } else if (result.status === 201) {
            window.location.href = "{{ request.args.get('redirect_uri') if request.args.get('redirect_uri') else '' }}?code=" + result.code + "&state=" + result.state;
          } else {
            showError(result.message || "登录失败，请检查输入信息");
          }
        } catch (error) {
          showError("网络异常，请稍后再试");
        } finally {
          submitButton.disabled = false;
          submitButton.textContent = "登录";
        }
      });
    });
  </script>
</body>
</html>